import { getElement, getYHeight, getGainValue, getScale } from "./ecgPublic";

export default function () {
  let ctx = null
  const clearRubbish = 10

  // 画标志位
  const draw = async (params) => {
    const {
      element,
      gridScale = 1,
      lineWidth = 1,
      ppm = 4,
      dpr = getScale(true),
      startXGridLen = 5, // 每条线距离左则的网格个数
      leadValueList = [], // 每个导联值的个数值
      leadNameList = [], // 每个导联的名字
      bottomBlank = 0, // 下留白(px)
      distribution = 'between', // 分布方式
      fontSize = 14, // 字体大小
      gain = 10, // 增益(Gain)： 单位： mm/mV, 每1mV的电压值显示的高度 (10mm/mV = 每1mV电压显示成10mm的高度)
      lineColor = '#333333',// 线条色
      fontColor = "#333333", // 字体色
      baseLineValue = 0, // 数据基线值(marginTop)
      isDrawFlag = true, // 是否开启画标志位
      isDrawShortFlag = false, // 是否开启简短志位
    } = params
    let canvasElement = await getElement(element)
    const canvas = canvasElement?.node
    if (!canvas) return
    const width = canvasElement.width
    const height = canvasElement.height
    canvas.width = width * dpr
    canvas.height = height * dpr
    ctx = canvas.getContext('2d')
    if (!ctx) { return false }
    ctx.beginPath()
    ctx.lineCap = "round"; //让画线连贯

    ctx.clearRect(
      0 - clearRubbish,
      0 - clearRubbish,
      width + clearRubbish,
      height + clearRubbish,
    )
    ctx.stroke()


    ctx.scale(dpr, dpr)

    // 左侧距离
    const startX = ppm * startXGridLen;

    // 每个导联的个数高度[100,200,300]
    const startYList = getYHeight(
      leadValueList.length,
      height - bottomBlank,
      gridScale,
      distribution
    );
    leadValueList.forEach((item, index) => {
      const startX = 0;
      const startY = startYList[index] + baseLineValue;
      ctx.imageSmoothingEnabled = true; // 开启图像平滑
      ctx.beginPath();
      // 画标志位
      if (isDrawFlag) {
        ctx.moveTo(startX, startY);
        drawFlag({
          leadIndex: item,
          Gain: gain,
          ctx,
          startX,
          startY,
          ppm,
          lineWidth,
          leadNameList
        });
      }
      // 画简短标志位
      if (isDrawShortFlag) {
        drawShortFlag({
          ctx,
          startX,
          startY,
          gridScale,
          lineWidth
        });
      }
      ctx.stroke();
    });

    // 画数值
    drawText({
      color: lineColor,
      nameList: leadNameList,
      leadValueList,
      baseLine: baseLineValue,
      fontColor: fontColor,
      startYList,
      ctx,
      startX,
      fontSize: fontSize / gridScale,
      marginTop: 20 * gridScale
    });

  }

  const drawFlag = params => {
    const { leadIndex, ctx, startX, startY, ppm, Gain, leadNameList, lineWidth } = params;
    const dataY = [0, 1, 1, 1, 0, 0];
    const include = [1, 4];
    let speedWidth = startX;
    ctx.lineWidth = lineWidth;
    dataY.forEach((list, N) => {
      let dx = ppm;
      if (include.includes(N)) {
        dx = 0;
      }
      speedWidth = speedWidth + dx;
      const gain = getGainValue(Gain, leadNameList[leadIndex]);
      const speedHeight = startY - gain * ppm * list;
      ctx.lineTo(speedWidth, speedHeight);
    });
  };

  const drawShortFlag = params => {
    const { ctx, startX, startY, gridScale, lineWidth } = params;
    let speedWidth = startX + 1;
    const height = 20;
    ctx.lineWidth = lineWidth;
    ctx.moveTo(speedWidth, startY - height);
    [-20 * gridScale].forEach(list => {
      const speedHeight = startY - list;
      ctx.lineTo(speedWidth, speedHeight);
    });
  };

  const drawText = params => {
    const { color, nameList, leadValueList, startYList, ctx, startX, baseLine, marginTop, fontColor, fontSize } = params;
    leadValueList.forEach((item, index) => {
      const eachHeight = startYList[index] + baseLine + marginTop;
      ctx.font = `500 ${fontSize}px Microsoft YaHei`;
      ctx.fillStyle = fontColor;
      ctx.strokeStyle = color;
      ctx.fillText(nameList[item], startX, eachHeight);
    });
  };


  return {
    draw
  }
}
